<template>
  <div>
    <div class="wrap" v-if="innerWidth > 500">
      <div class="fixed u-flex">
        <img class="hand img" src="@/image/index/back.png" @click="back">
        <img src="@/image/russia/logo2.png" class="logo">
        俄数通
      </div>
      <div class="fixed_hei"></div>
      <div class="listBg u-flex">
        <div class="cont">行业数据分析</div>
      </div>
      <div class="cont">
        <div class="u-flex u-row-between">
          <div class="modular">
            <div class="modular_bg mainHei1" id="main1" style="width: 100%"></div>
            <div class="l_top modular_bg">
              <div class="tit">办公桌椅中国向俄出口</div>
              <div class="u-flex cont2" v-for="(item, index) in goodsList">
                <div class="num">{{ item.goods_name }}</div>
                <div class="progress u-flex">
                  <div class="progress bor">
                    <el-progress :color="index == 0
                      ? '#AFF9FF'
                      : index == 1
                        ? '#77F4FF'
                        : index == 2
                          ? '#2AEEFF'
                          : index == 3
                            ? '#37B8FF'
                            : '#4192F6'
                      " :stroke-width="strokeWidth" :percentage="index == 4
                        ? 100
                        : (item.trading_volumes /
                          goodsList[4].trading_volumes) *
                        100
                        " :show-text="false" />
                  </div>
                  <div class="text">
                    {{ formatNumber(parseInt(item.trading_volumes)) }}套
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modular">
            <div class="modular_bg mainHei2">
              <div class="tit tit2">2024上半年卫生巾占比</div>
              <div class="proBg u-flex-center">
                <a-progress :percent="percent" type="circle" :strokeColor="gradientColor" trailColor="#fff"
                  :format="(percent) => `${percent}%`" :strokeWidth="15" :size="proSize">
                </a-progress>
                <img src="@/image/russia/rad_line.png" class="line" />
                <div class="text_left">总占比83%</div>
                <!-- <div class="text_right">对俄出口贸易占比13%</div>  -->
              </div>
            </div>
            <div class="modular_bg mainHei3" id="main3" style="width: 100%; margin-top: 20px"></div>
          </div>
        </div>
        <div class="modular100 modular_bg">
          <div v-for="item in list" class="u-flex in_it hand" @click="newClick(item)">
            <div class="it_left u-flex">
              <div class="it_line">
                <div class="it_data u-flex-center">
                  <div class="it_day"> {{ item.time.substring(8, 10) }}/</div>
                  <div class="it_mon u-flex u-flex-col u-col-bottom">
                    <div>{{ item.time.substring(5, 7) }}月</div>
                    <div>{{ item.time.substring(0, 4) }}</div>
                  </div>
                </div>
              </div>
              <div class="it_cont u-flex-center u-flex-col u-col-top ">
                <div class="it_big">{{ item.title }}</div>
                <div class="it_sma webkit-line-clamp-two">
                  {{ item.desc }}
                </div>
                <div class="it_blue">查看详情</div>
              </div>
            </div>
            <div class="it_img">
              <img :src="item.image_url" alt="" />
            </div>
          </div>

          <div v-if="list.length > 0" class="pagination">
            <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :total="pagination.total"
              :show-quick-jumper="true" :locale="locale" @change="handleTableChange" />
          </div>
        </div>
      </div>
    </div>
    <!-- 手机端 -->
    <div v-else class="pho">
      <PhoHead topIndex="det"></PhoHead>
      <img src="@/image/russia/data/head.png" class="top">
      <div class="bottom">
        <div class="smaWhite">
          <div id="main1" style="width: 340px;height:100%;margin: 0 auto;"></div>
        </div>
        <div class="smaWhite">
          <div class="tit tit2">2024上半年卫生巾占比</div>
          <div class="proBg u-flex-center">
            <a-progress :percent="percent" type="circle" :strokeColor="gradientColor" trailColor="#fff"
              :format="(percent) => `${percent}%`" :strokeWidth="15" :size="proSize">
            </a-progress>
            <img src="@/image/russia/rad_line.png" class="line" />
            <div class="text_left">总占比83%</div>
          </div>
        </div>
        <div class="smaWhite">
          <div class="tit3 tit2">办公桌椅中国向俄出口</div>
          <div class="u-flex cont2" v-for="(item, index) in goodsList">
            <div class="num">{{ item.goods_name }}</div>
            <div class="progress u-flex">
              <div class="progress bor">
                <el-progress :color="index == 0
                  ? '#AFF9FF'
                  : index == 1
                    ? '#77F4FF'
                    : index == 2
                      ? '#2AEEFF'
                      : index == 3
                        ? '#37B8FF'
                        : '#4192F6'
                  " :stroke-width="strokeWidth" :percentage="index == 4
                    ? 100
                    : (item.trading_volumes /
                      goodsList[4].trading_volumes) *
                    100
                    " :show-text="false" />
              </div>
              <div class="text">
                {{ formatNumber(parseInt(item.trading_volumes)) }}套
              </div>
            </div>
          </div>
        </div>
        <div class="smaWhite">
          <div id="main3" style="width: 100%;height:100%;"></div>
        </div>
        <div class="white">
          <div v-for="item in list" class="u-flex in_it hand" @click="newClick(item)">
            <div class="it_img">
              <img :src="item.image_url" alt="" />
            </div>
            <div class="it_ri">
              <div class="it_big">{{ item.title }}</div>
              <div class="it_sma webkit-line-clamp-three">
                {{ item.desc }}
              </div>
              <div class="it_data">
                {{ item.time.substring(0, 4) }}-{{ item.time.substring(5, 8) }}{{ item.time.substring(8, 10) }}
              </div>
            </div>
          </div>
          <div v-if="list.length > 0" class="pagination">
            <a-pagination :current="pagination.current" :pageSize="pagination.pageSize" :locale="locale"
              :total="pagination.total" :show-quick-jumper="true" @change="handleTableChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import * as echarts from "echarts";
export default {
  data() {
    return {
      innerWidth: 0,
      goodsList: [
        {
          goods_name: "2020年",
          trading_volumes: 80,
        },
        {
          goods_name: "2021年",
          trading_volumes: 69,
        },
        {
          goods_name: "2022年",
          trading_volumes: 110,
        },
        {
          goods_name: "2023年",
          trading_volumes: 139,
        },
        {
          goods_name: "2024年",
          trading_volumes: 569,
        },
      ],
      strokeWidth: 10,

      list: [],
      // 分页
      pagination: {
        total: 0, // 总数据量
        current: 1, // 当前页码
        pageSize: 5, // 每页显示条数
        showQuickJumper: true, // 是否可以快速跳转
      },
      locale: {
        items_per_page: "每页条数：",
        jump_to: "跳转至",
        page: "页",
        jump_to_confirm: "确认跳转",
        next_page: "下一页",
        prev_page: "上一页",
        first_page: "首页",
        last_page: "尾页",
      },

      percent: 0, // 初始进度
      gradientColor: {
        "0%": "#4868f3", // 渐变起始颜色
        "100%": "#d9e0fd", // 渐变结束颜色
      },

      proSize: 140,
    };
  },
  created() {
    this.innerWidth = window.innerWidth;
    this.store = useStore();
    this.pagination.current = Number(sessionStorage.getItem('categoryPage') || 1)
    if (1000 < this.innerWidth && this.innerWidth <= 1366) {
      this.strokeWidth = 7;
      this.proSize = 115;
    } else if (500 < this.innerWidth && this.innerWidth <= 1000) {
      this.proSize = 75;
      this.strokeWidth = 6;
    } else if (this.innerWidth <= 500) {
      this.proSize = 108;
      this.strokeWidth = 6;
    }
  },
  mounted() {
    // 产品销售量对比-柱状图
    this.myEcharts1();
    // 产品价格量对比-圆形进度条
    this.updateProgress();
    // // 产品价格量对比-折线图
    this.myEcharts3();
    // 列表数据
    this.listFn();
  },
  methods: {
    updateProgress() {
      const interval = setInterval(() => {
        if (this.percent < 83) {
          this.percent += 1; // 增加进度
        } else {
          clearInterval(interval); // 达到100%后停止
        }
      }, 10); // 每100毫秒更新一次
    },
    formatNumber(value) {
      if (!value) return "0";
      const numStr = value.toString();
      return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    myEcharts1() {

      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(
        document.getElementById("main1"),
        "fresh-cut"
      );
      let titFont = 18; //标题文字大小
      let barWidth = 24; //柱形宽度
      let barWidB = 12; //柱形左右部分宽度
      let xTextFont = 12; // x轴文字大小，柱形上方文字加2字号
      let leftPx = "-19px"; //柱形图上下片的位置
      let gridLeft = "15%" //表格整体离左边的距离
      let gridRight = "10%"//表格整体离右边的距离
      let gridBottom = "15%"//表格整体离下边的距离
      let gridTop = "30%"//表格整体离上边的距离
      let titleTop = "6%" //标题文字距上距离
      let barTopWidth = 15//柱状图上方 方快拉长比例
      let barBotWidth = 10//柱状图下方 方快拉长比例
      let offsetTop = -23//柱状图上方数字距 柱状图的距离

      if (1500 < this.innerWidth && this.innerWidth <= 1650) {
        leftPx = "-17px";
        titFont = 16;
        barWidth = 20;
        barWidB = 10;
        xTextFont = 10;
      } else if (1366 < this.innerWidth && this.innerWidth <= 1500) {
        leftPx = "-13px";
        titFont = 16;
        barWidth = 20;
        barWidB = 9;
        xTextFont = 10;
      } else if (1250 < this.innerWidth && this.innerWidth <= 1366) {
        leftPx = "-10px";
        titFont = 16;
        barWidth = 20;
        barWidB = 9;
        xTextFont = 10;
      } else if (1150 < this.innerWidth && this.innerWidth <= 1250) {
        leftPx = "-7x";
        titFont = 16;
        barWidth = 20;
        barWidB = 9;
        xTextFont = 8;
      } else if (1000 < this.innerWidth && this.innerWidth <= 1150) {
        leftPx = "-4x";
        titFont = 16;
        barWidth = 20;
        barWidB = 9;
        xTextFont = 8;
      } else if (900 < this.innerWidth && this.innerWidth <= 1000) {
        leftPx = "-7px";
        titFont = 11;
        barWidth = 14;
        barWidB = 7;
        xTextFont = 7;
        gridLeft = '18%'
      } else if (500 < this.innerWidth && this.innerWidth <= 900) {
        leftPx = "-5px";
        titFont = 11;
        barWidth = 14;
        barWidB = 7;
        xTextFont = 7;
        gridLeft = '19%'
      } else if (this.innerWidth <= 500) {
        leftPx = "-11";
        titFont = 12;
        barWidth = 12;
        barWidB = 6;
        xTextFont = 9;
        gridLeft = '14%'
        gridRight = '2%'
        gridBottom = '30px'
        gridTop = '25%'
        titleTop = '1%'
        barTopWidth = 10
        barBotWidth = 8
        offsetTop = -18
      }
      let setColor = function (colorArr) {
        let color = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          /* 此处决定阴暗面 若为横向柱状图则x,y轴调换
                        x: 0,
                        x2: 0,
                        y: 0,
                        y2: 1, */
          colorStops: [
            {
              offset: 0,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[1],
            },
            {
              offset: 1,
              color: colorArr[1],
            },
          ],
        };
        return color;
      };
      var colorArr1 = ["#2b90b0", "#359cbf"];
      var color1 = setColor(colorArr1);

      const option = {
        grid: {
          top: gridTop, // 上侧距离
          left: gridLeft, // 左侧距离
          right: gridRight, // 右侧距离
          bottom: gridBottom, // 下侧距离
          // 你可以继续设置 top, bottom 控制上下距离
        },
        title: {
          subtext: "卫生巾历年次数交易对比",
          top: titleTop,
          left: "center", // 可选：'left', 'right', 'center'
          subtextStyle: {
            fontSize: titFont, // 副标题字号
            color: "#333", // 副标题颜色
          },
        },
        xAxis: {
          type: "category",
          data: ["2020年", "2021年", "2022年", "2023年", "2024年"],
          axisLine: {
            lineStyle: {
              color: "#ccc", // 设置 X 轴线颜色
            },
          },
          axisTick: {
            show: false, // 不显示刻度线
          },
          axisLabel: {
            fontSize: xTextFont,
            color: "#333", // 设置 X 轴标签的颜色
          },
        },
        yAxis: {
          name: "(次数)",
          type: "value",
          //单位的样式设置
          nameTextStyle: {
            padding: [0, 0, 0, -50], //间距分别是 上 右 下 左
          },
          splitLine: {
            show: false, // 隐藏X轴分割线
          },
        },
        series: [
          {
            //柱子左面设置立体正方
            z: 1,
            type: "bar",
            barWidth: Number(barWidB + 1),
            data: [25254, 25847, 25114, 22331, 29160],
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置在柱形图顶部
              formatter: "{c}", // 显示数值
              offset: [5, offsetTop],
              color: "#55E7ED", // 标签文字颜色
              fontSize: Number(xTextFont + 2), // 标签文字大小
            },
            itemStyle: {
              normal: {
                //柱子左面重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1bdddc",
                    },
                    {
                      offset: 0.8,
                      color: "#2b8eaf",
                    },
                  ],
                },
              },
            },
          },
          {
            //柱子右面设置立体正方
            z: 1,
            // 间隔为0
            barGap: 0,
            type: "bar",
            barWidth: barWidB,
            data: [25254, 25847, 25114, 22331, 29160],
            itemStyle: {
              //柱子右面
              normal: {
                // 重要的是color配置：线性渐变， 从上往下
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#5ffbfa",
                    },
                    {
                      offset: 1,
                      color: "#359cbf",
                    },
                  ],
                },
                borderWidth: 0,
                borderColor: "rgba(76,182,251, 0.5)",
              },
            },
          },
          {
            z: 3,
            name: "上部分",
            type: "pictorialBar",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [leftPx, "-48%"],
            symbolSize: [barWidth, barTopWidth],
            data: [25264, 25857, 25124, 22341, 29170],
            itemStyle: {
              normal: {
                color: "#38e3ff",
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1,
            name: "下部分",
            type: "pictorialBar",
            data: [25284, 25877, 25144, 22361, 29190],
            symbol: "diamond",
            symbolOffset: [leftPx, "50%"],
            symbolSize: [barWidth, barBotWidth],
            itemStyle: {
              normal: {
                color: color1,
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1,
            name: "透明背景上部分",
            type: "pictorialBar",
            symbolPosition: "end",
            data: [28454, 29047, 28314, 25531, 32360],
            symbol: "diamond",
            symbolOffset: [leftPx, "-50%"],
            symbolSize: [barWidth, barTopWidth],
            itemStyle: {
              normal: {
                color: "#ecfbff",
              },
            },
            tooltip: {
              show: false,
            },
          },
          {
            z: 1, // z轴层叠顺序
            name: "底部透明正方体",
            type: "pictorialBar",
            symbol: "rect",
            barWidth: barWidth + "px",
            silent: true, // 不显示提示信息
            color: "#ecfbff", // 颜色
            data: [28454, 29047, 28314, 25531, 32360], // 数据
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    myEcharts3() {
      const myChart = echarts.init(
        document.getElementById("main3"),
        "fresh-cut"
      );
      let titFont = 18; //标题文字大小
      let xTextFont = 12; // x轴文字大小，柱形上方文字加2字号
      let gridTop = "30%"; //表格和外层盒子的上距离
      let gridLeft = "10%"; //表格和外层盒子的左距离
      let gridRight = "10%"; //表格和外层盒子的右距离
      let gridBottom = "20%"//表格和外层盒子的下距离
      let legendWidth = 12;// 设置图例项的宽度
      let legendHeight = 12;// 设置图例项的高度
      let titleTop = "6%"// 标题顶部距离
      let legendBottom = "5%" //图例位置

      if (1366 < this.innerWidth && this.innerWidth <= 1650) {
        titFont = 16;
        xTextFont = 12;
      } else if (1150 < this.innerWidth && this.innerWidth <= 1366) {
        titFont = 16;
        xTextFont = 12;
        gridLeft = '15%'
      } else if (1000 < this.innerWidth && this.innerWidth <= 1150) {
        titFont = 15;
        xTextFont = 10;
        gridLeft = "15%";
        gridRight = "7%";
        legendWidth = 8;
        legendHeight = 8;
      } else if (500 < this.innerWidth && this.innerWidth <= 1000) {
        titFont = 11;
        xTextFont = 10;
        gridLeft = "15%";
        gridRight = "7%";
        legendWidth = 8;
        legendHeight = 8;
      } else if (this.innerWidth <= 500) {
        titFont = 12;
        xTextFont = 10;
        gridTop = "45";
        gridLeft = "12%";
        gridRight = "5%";
        gridBottom = "45"
        legendWidth = 8;
        legendHeight = 8;
        titleTop = "1%"
        legendBottom = "3"
      }

      // 配置选项
      var option = {
        title: {
          subtext: "电动工具，办公桌椅历年全球供应商对比",
          top: titleTop,
          left: "center", // 可选：'left', 'right', 'center'
          subtextStyle: {
            fontSize: titFont, // 副标题字号
            color: "#333", // 副标题颜色
          },
        },
        grid: {
          top: gridTop, // 上侧距离
          left: gridLeft, // 左侧距离
          right: gridRight, // 右侧距离
          bottom: gridBottom, //下侧距离
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["电动工具", "办公桌椅"], // 图例内容
          bottom: legendBottom, // 图例位置
          textStyle: {
            fontSize: xTextFont, // 设置字体大小
          },
          itemWidth: legendWidth, // 设置图例项的宽度
          itemHeight: legendHeight, // 设置图例项的高度
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false, // 不显示刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#ccc", // 设置 X 轴线颜色
            },
          },
          axisLabel: {
            fontSize: xTextFont,
            color: "#333", // 设置 X 轴标签的颜色
          },
          data: ["2020年", "2021年", "2022年", "2023年", "2024年"],
        },
        yAxis: {
          type: "value",
          //   name: "(元)",
          //   //单位的样式设置
          //   nameTextStyle: {
          //     padding: [0, 0, 0, -40], //间距分别是 上 右 下 左
          //   },
        },
        series: [
          {
            name: "电动工具",
            type: "line", // 折线图
            data: [772, 801, 815, 852, 372],
            smooth: false, // 平滑曲线
            symbol: "circle",
            symbolSize: 10,
            showSymbol: false,
            itemStyle: {
              color: "#4afcd3", // 线条颜色
            },
            areaStyle: {
              // 设置渐变背景
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  { offset: 1, color: "rgba(34, 255, 204, 0.5)" }, // 顶部颜色
                  { offset: 0, color: "rgba(34, 255, 204, 0.1)" }, // 底部颜色
                ],
              },
            },
          },
          {
            name: "办公桌椅",
            type: "line", // 折线图
            data: [1007, 1081, 821, 517, 620],
            smooth: false, // 平滑曲线
            symbol: "circle",
            symbolSize: 10,
            showSymbol: false,
            itemStyle: {
              color: "#239aff", // 线条颜色
            },
            areaStyle: {
              // 设置渐变背景
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  { offset: 1, color: "rgba(35, 154, 255, 0.5)" }, // 顶部颜色
                  { offset: 0, color: "rgba(35, 154, 255, 0.1)" }, // 底部颜色
                ],
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    },
    listFn() {
      this.store
        .dispatch("home/articleApi", {
          page: this.pagination.current,
          per_page: this.pagination.pageSize,
          categoryId: 3,
        })
        .then((res) => {
          if (res.status == 200) {
            this.list = res.data.list.data;
            this.pagination.total = res.data.list.total;
          }
        });
    },
    // 处理表格分页变化的事件
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination;
      this.listFn(); //采购商品列表
    },
    newClick(item) {
      this.$router.push({
        path: "/russia/detail",
        query: { id: item.article_id },
      });
      sessionStorage.setItem('categoryPage', this.pagination.current)//存分页条数
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
// 进度条背景颜色
::v-deep .el-progress-bar__outer {
  background: #fff !important;
}

// 分页
/* 设置每一项的边框 */
::v-deep .ant-pagination .ant-pagination-item {
  border-radius: 3px;
  border: 1px solid #ccc;
}

/* 设置选中的边框 */
::v-deep .ant-pagination-item-active {
  border: 1px solid #1677ff !important;
}

// 产品销售量第二张图
::v-deep :where(.css-dev-only-do-not-override-1hsjdkk).ant-progress-line {
  margin: 0 !important;
}

//进度条中间文字加粗
::v-deep :where(.css-dev-only-do-not-override-1hsjdkk).ant-progress.ant-progress-circle .ant-progress-text {
  font-weight: bold;
}

@media screen and (max-width: 1920px) {
  .listBg {
    font-size: 40px !important;
  }
}

@media screen and (max-width: 1650px) {
  .cont {
    width: 1240px !important;
  }

  .listBg {
    font-size: 36px !important;
  }

  .l_top {

    .tit {
      font-size: 16px !important;
    }
  }

  .modular_bg {

    .tit {
      font-size: 16px !important;
    }

    .tit2 {
      padding-top: 36px !important;
    }
  }

  .in_it {

    .it_left {

      .it_cont {
        height: 73% !important;
      }
    }
  }
}

@media screen and (max-width: 1500px) {
  .cont {
    width: 1100px !important;
  }

  .listBg {
    font-size: 34px !important;
  }

  .fixed {
    font-size: 16px !important;


    .img {
      width: 11px !important;
    }

    .logo {
      width: 40px !important;
      margin: 0 16px !important;
    }
  }

  .modular100 {
    margin-top: 10px !important;
    padding: 30px 6% 30px !important;

    .in_it {

      .it_left {
        height: 110px !important;

        .it_line {
          width: 130px !important;

          .it_data {

            .it_day {
              font-size: 24px !important;
              margin-right: 4px !important;
            }

            .it_mon {
              font-size: 11px !important;
              line-height: 16px !important;
            }
          }
        }

        .it_cont {
          height: 73% !important;
          padding: 0 90px 0 26px !important;

          .it_big {
            font-size: 15px !important;
            margin-bottom: 6px !important;
          }

          .it_sma {
            font-size: 12px !important;
            line-height: 17px !important;
          }

          .it_blue {
            font-size: 10px !important;
            margin-top: 6px !important;
          }
        }
      }

      .it_img {
        width: 110px !important;
        height: 110px !important;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .cont {
    width: 1000px !important;
  }

  .listBg {
    font-size: 32px !important;
  }

  .fixed {
    font-size: 14px !important;


    .img {
      width: 10px !important;
    }

    .logo {
      width: 35px !important;
      margin: 0 14px !important;
    }
  }

  .mainHei1 {
    height: 300px !important;
  }

  .l_top {
    height: 240px !important;
    padding: 30px 46px 0px !important;

    .tit {
      font-size: 16px !important;
    }

    .cont2 {
      margin-top: 18px !important;
    }

    .num {
      width: 66px !important;
      height: 14px !important;
      font-size: 12px !important;
      margin-right: 16px;
    }

    .bor {
      border-radius: 20px !important;
      padding: 3px !important;
    }

    .text {
      width: 56px !important;
      font-size: 12px !important;
    }
  }

  .mainHei2 {
    height: 240px !important;
  }

  .modular_bg {

    .tit {
      font-size: 16px !important;
    }

    .tit2 {
      padding-top: 36px !important;
    }

    .proBg {
      width: 150px !important;
      margin-top: 20px !important;

      .line {
        width: 130px !important;
        aspect-ratio: 16/4;
        left: -110px !important;
      }

      .text_left {
        font-size: 13px !important;
        left: -100px !important;
        top: 15% !important;
      }
    }
  }

  .mainHei3 {
    height: 300px !important;
  }

  .modular100 {
    margin-top: 10px !important;
    padding: 30px 6% 30px !important;
  }
}

@media screen and (max-width: 1250px) {
  .cont {
    width: 900px !important;
  }

  .listBg {
    font-size: 30px !important;
  }

  .l_top {
    height: 240px !important;
    padding: 25px 20px 0px !important;

    .tit {
      font-size: 16px !important;
    }

    .num {
      width: 56px !important;
      height: 14px !important;
      font-size: 11px !important;
    }

    .bor {
      border-radius: 20px !important;
      padding: 3px !important;
    }

    .text {
      width: 51px !important;
      font-size: 11px !important;
    }
  }

  .modular100 {
    margin-top: 5px !important;
    padding: 20px 6% 30px !important;

    .in_it {

      .it_left {

        .it_line {
          width: 120px !important;

          .it_data {

            .it_day {
              font-size: 22px !important;
              margin-right: 3px !important;
            }

            .it_mon {
              font-size: 10px !important;
              line-height: 14px !important;
            }
          }
        }

        .it_cont {
          padding: 0 70px 0 23px !important;

          .it_sma {
            font-size: 11px !important;
            line-height: 16px !important;
          }

          .it_blue {
            font-size: 9px !important;
            margin-top: 5px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1150px) {
  .cont {
    width: 800px !important;
  }

  .listBg {
    font-size: 28px !important;
  }

  .modular100 {
    margin-top: 5px !important;
    padding: 20px 6% 25px !important;

    .pagination {
      padding-top: 25px !important;
    }
  }

  .modular_bg {

    .tit2 {
      padding-top: 30px !important;
    }

    .proBg {
      .line {
        width: 110px !important;
        left: -90px !important;
      }

      .text_left {
        left: -80px !important;
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .cont {
    width: 700px !important;
  }

  .listBg {
    font-size: 24px !important;
  }

  .mainHei1 {
    height: 250px !important;
  }

  .l_top {
    height: 190px !important;
    padding: 25px 20px 0px !important;

    .tit {
      font-size: 11px !important;
    }

    .cont2 {
      margin-top: 11px !important;
    }

    .num {
      width: 40px !important;
      height: 13px !important;
    }

    .text {
      width: 34px !important;
    }
  }

  .mainHei2 {
    height: 170px !important;
  }

  .modular_bg {

    .tit {
      font-size: 11px !important;
    }

    .tit2 {
      padding-top: 26px !important;
    }

    .proBg {
      width: 100px !important;
      margin-top: 15px !important;

      .line {
        width: 90px !important;
        left: -76px !important;
      }

      .text_left {
        font-size: 11px !important;
        left: -70px !important;
        top: 13% !important;
      }
    }
  }

  .mainHei3 {
    height: 270px !important;
  }

  .modular100 {
    margin-top: 0px !important;

    .in_it {

      .it_left {
        height: 90px !important;

        .it_line {
          width: 100px !important;

          .it_data {

            .it_day {
              font-size: 18px !important;
              margin-right: 2px !important;
            }

            .it_mon {
              font-size: 8px !important;
              line-height: 12px !important;
            }
          }
        }

        .it_cont {
          padding: 0 50px 0 20px !important;

          .it_big {
            font-size: 13px !important;
            margin-bottom: 4px !important;
          }

          .it_sma {
            font-size: 9px !important;
            line-height: 14px !important;
          }

          .it_blue {
            font-size: 8px !important;
            margin-top: 4px !important;
          }
        }
      }

      .it_img {
        width: 90px !important;
        height: 90px !important;
      }
    }
  }
}

@media screen and (max-width: 900px) {
  .cont {
    width: 650px !important;
  }

  .listBg {
    font-size: 22px !important;
  }

  .modular100 {
    margin-top: 0px !important;
  }
}

.wrap {
  min-height: 100vh;
  background: #f7f8fa;
}

.fixed {
  width: 100%;
  position: fixed;
  font-size: 20px;
  color: #333;
  height: 60px;
  line-height: 60px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 56px;
  background-color: #fff;
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.16);

  .img {
    width: 13px;
    margin-right: 6px;
  }

  .logo {
    width: 45px;
    margin: 0 20px;
  }
}

.fixed_hei {
  height: 60px;
}

.listBg {
  width: 100%;
  aspect-ratio: 16/4;
  font-size: 50px;
  color: #333;
  margin-bottom: 20px;
  background-image: url("../../../image/russia/industryBg.png");
  /* 背景图片覆盖整个元素 */
  background-size: 100% 100%;
  /* 背景图片不重复 */
  background-repeat: no-repeat;
  /* 背景图片居中 */
  background-position: center;
}

.cont {
  width: 1440px;
  margin: 0 auto;

  .modular {
    width: 49.5%;
  }

  .modular_bg {
    background-color: #fff;
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

    .tit {
      color: #333;
      text-align: center;
      font-size: 18px;
    }

    .tit2 {
      padding-top: 40px;
    }

    .proBg {
      width: 180px;
      aspect-ratio: 16/16;
      margin: 0 auto;
      margin-top: 25px;
      position: relative;
      background-image: url("../../../image/russia/rad_quan.png");
      /* 背景图片覆盖整个元素 */
      background-size: 100% 100%;
      /* 背景图片不重复 */
      background-repeat: no-repeat;
      /* 背景图片居中 */
      background-position: center;

      .line {
        width: 141px;
        aspect-ratio: 16/4;
        position: absolute;
        left: -120px;
        top: 25%;
      }

      .text_left {
        font-size: 14px;
        color: #333;
        position: absolute;
        left: -110px;
        top: 16%;
      }
    }
  }

  .mainHei1 {
    height: 400px;
  }

  .mainHei2 {
    height: 300px;
  }

  .mainHei3 {
    height: 440px;
  }

  .l_top {
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    height: 340px;
    padding: 40px 46px 0px;

    .tit {
      color: #333;
      text-align: center;
      font-size: 18px;
    }

    .cont2 {
      margin-top: 17px;
    }

    .num {
      width: 70px;
      height: 29px;
      display: flex;
      font-size: 14px;
      margin-right: 16px;
    }

    .progress {
      flex: 1;
    }

    .bor {
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 5px;
    }

    .text {
      width: 60px;
      font-size: 13px;
      margin-left: 10px;
      text-align: right;
    }
  }

  .modular100 {
    width: 100%;
    margin-top: 20px;
    padding: 17px 6% 40px;

    .in_it {
      width: 100%;
      margin-bottom: 20px;
      background: #FAFAFA;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

      .it_left {
        flex: 1;
        height: 124px;

        .it_line {
          width: 143px;
          height: 60%;
          border-right: 1px solid #ccc;

          .it_data {
            width: 80%;
            height: 100%;
            background: linear-gradient(138deg, #D7EFFF 0%, #98B7FF 100%);
            box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

            .it_day {
              font-size: 28px;
              color: #333;
              margin-right: 5px;
            }

            .it_mon {
              font-size: 12px;
              color: #555;
              line-height: 18px;
            }
          }
        }

        .it_cont {
          flex: 1;
          height: 70%;
          color: #333;
          padding: 0 100px 0 32px;

          .it_big {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
          }

          .it_sma {
            font-size: 14px;
            line-height: 20px;
          }

          .it_blue {
            font-size: 12px;
            color: #2B60B6;
            margin-top: 10px;
          }
        }
      }

      .it_img {
        width: 124px;
        height: 124px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .pagination {
      text-align: right;
      padding-top: 30px;
    }
  }
}

// 手机端
.pho {
  min-height: 100vh;
  // background: #F7F8FA;

  .top {
    width: 100%;
  }

  .bottom {
    padding: 15px;

    .smaWhite {
      width: 100%;
      height: 203px;
      margin-bottom: 20px;
      background: #FFFFFF;
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

      &:last-child {
        margin-bottom: 0px;
      }

      // 环形图 卫生巾
      .tit {
        color: #333;
        text-align: center;
        font-size: 12px;
      }

      .tit2 {
        padding-top: 17px;
      }

      .proBg {
        width: 140px;
        aspect-ratio: 16/16;
        margin: 0 auto;
        margin-top: 16px;
        position: relative;
        background-image: url("../../../image/russia/rad_quan.png");
        /* 背景图片覆盖整个元素 */
        background-size: 100% 100%;
        /* 背景图片不重复 */
        background-repeat: no-repeat;
        /* 背景图片居中 */
        background-position: center;

        .line {
          width: 110px;
          aspect-ratio: 16/4;
          position: absolute;
          left: -90px;
          top: 20%;
        }

        .text_left {
          font-size: 12px;
          color: #333;
          position: absolute;
          left: -80px;
          top: 9%;
        }
      }

      //办公桌椅
      .tit3 {
        color: #333;
        text-align: center;
        font-size: 12px;
      }

      .cont2 {
        margin-top: 12px;
      }

      .num {
        width: 60px;
        height: 18px;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding-left: 10px;
      }

      .progress {
        flex: 1;
      }

      .bor {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 1px;
      }

      .text {
        width: 50px;
        font-size: 12px;
        text-align: right;
        padding-right: 10px;
      }
    }

    // 列表
    .white {
      // background: #fff;
      // padding: 20px 15px 0;
      // box-shadow: 0px 5px 6px -4px rgba(0, 0, 0, 0.16);

      .in_it {
        width: 100%;
        background: #fafafa;
        margin-top: 16px;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);

        .it_img {
          width: 120px;
          height: 110px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .it_ri {
          padding:8px 12px;
          color: #333;
          height: 110px;
          width: calc(100% - 120px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .it_big {
            font-size: 14px;
            font-weight: bold;
          }

          .it_sma {
            font-size: 12px;
            line-height: 18px;
          }

          .it_data {
            font-size: 12px;
            text-align: right;
          }
        }
      }

      .pagination {
        text-align: center;
        padding: 30px 0;
      }
    }
  }
}
</style>